<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.webside.points.wechat.Constant"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
	String  openId = (String)request.getSession().getAttribute("openId");
	String url = Constant.REALM_URL;
%>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="../css/amazeui.min.css">
  <link rel="stylesheet" href="../css/wap.css">
  <link rel="stylesheet" href="../css/style.css"/>
  <link rel="stylesheet" href="../css/weui.css" />
   <link rel="stylesheet" href="../css/ydui.css?rev=@@hash"/>

  <title>申请专家</title>
  <script src="../js/jquery.js"></script>
  <script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="../js/amazeui.min.js"></script>
  <script type="text/javascript">
  
  
  function checkSize(param){
		var size=param.value.length;
		if(size==50){
			param.setAttribute("onkeypress","javascript:return false");
		}else if(size<=34){
			param.setAttribute("onkeypress","");
		}
	}
	function wxConfig(){
		
		var url = "${ctx }/wechat/getWxSignatureByTicket";
		
		var href=window.location.href;
		//alert(href);
		var params = {"url":href};
		   
		$.post(url, params, function(data, status, xhr){
			callbackConfig(data);
		},'json');
	}
	wxConfig();
	function callbackConfig(data) {
		 wx.config({
		      debug: false,
		      appId: data.appId,
		      timestamp: data.timestamp,
		      nonceStr: data.noncestr,
		      signature: data.signature,  
		      jsApiList: [
				'checkJsApi',
				'startRecord',
		        'stopRecord',
		        'playVoice',
		        'stopVoice',
		        'uploadVoice',
		        'downloadVoice',
				'chooseImage',
				'uploadImage',
				'downloadImage',
				'getLocalImgData',
				'onMenuShareAppMessage',
				'hideMenuItems'
		      ]
		  }); 
	}
	
	//检查接口是否能调用
	wx.ready(function () {
		wx.checkJsApi({
		    jsApiList: [
		        'startRecord',
		        'stopRecord',
		        'pauseVoice'
		    ],
		    success: function (res) {
		        // alert(JSON.stringify(res));
		        // alert(JSON.stringify(res.checkResult.getLocation));
		        if (res.checkResult.getLocation == false) {
		            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
		            return;
		        }
		    }
		});
			
		//分享图片路径
		var url = "<%=url%>" +"images/share.jpg";
		
		//alert(url);
		
		//分享给朋友圈
		wx.onMenuShareTimeline({
			title: '欢迎使用中穆问答', // 分享标题
			link: "<%=url%>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: url, // 分享图标
			success: function () { 
				// 用户确认分享后执行的回调函数
			},
			cancel: function () { 
				// 用户取消分享后执行的回调函数
			}
		});
		//分享给朋友
		wx.onMenuShareAppMessage({
			title: '欢迎使用中穆问答', // 分享标题
			desc: '穆斯林的问题，来问中穆问答。这里有许多专家随时为您答疑解惑。', // 分享描述
			link: "<%=url%>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: url, // 分享图标
			success: function () { 
				// 用户确认分享后执行的回调函数
			},
			cancel: function () { 
				// 用户取消分享后执行的回调函数
			}
		});
	});
	
	//选择图片与拍照	
	function chooseImage(e){
		
		var name=$(e).attr("name");
		//alert(name);
		//删除已有的照片
		wx.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function (res) {

				var  imgLocalId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片		
				//alert(imgLocalId);
								
					var tmpl = '<img class="image" src=#url# id=#value#  width="100%" height="100%" alt=#name# /><input type="hidden" id='+name+' name='+name+'>';
					 if (window.__wxjs_is_wkwebview) {
						//ios
							wx.getLocalImgData({
								localId: imgLocalId[0], // 图片的localID
								success: function (res) {
									var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
									localData = localData.replace('jgp', 'jpeg');
									//alert(localData);
									tmpl=tmpl.replace("#url#", localData);	
									tmpl=tmpl.replace("#value#", imgLocalId[0]);
									tmpl=tmpl.replace("#name#", name);
									$(e).parent().attr("class","");
									$(e).parent().html(tmpl);
								}
							});
						 
					 }else{
						 //安卓
						 tmpl=tmpl.replace("#url#", imgLocalId[0]);
						 tmpl=tmpl.replace("#value#", imgLocalId[0]);
						 tmpl=tmpl.replace("#name#", name);
						 $(e).parent().attr("class","");
						 $(e).parent().html(tmpl);
					 }
					
				}

		});
	}
	$(function(){
		var $tooltips = $('.js_tooltips');
		$(".weui-btn_primary").click(function(){
			//alert("ok");
			if($(this).val().indexOf("修改")!=-1){
				//alert($(this).val());
				$("#form")[0].action="${ctx }/expert/update";
			}
			
			var image=$(".image");
			var count=0;
			var maxCount=image.length;
			
			var name=$("#name").val();
			var phone=$("#phone").val();
			var address=$("#address").val();
			var workUnit=$("#workUnit").val();
			var duty=$("#duty").val();
			var idCard=$("#idCard").val();
			var education=$("#education").val();
			var speciality=$("#speciality").val();
			var work=$("#work").val();
			var describe=$("#describe").val();
			
			var idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
			
			var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
			
			
			if(name==""){
				out("请输入姓名");
			}else if(phone==""){
				out("请输入手机号码");
			}else if(address==""){
				out("请输入居住地");
			}else if(workUnit==""){
				out("请输入工作单位");
			}else if(duty==""){
				out("请输入职务");
			}else if(idCard==""){
				out("请输入身份证");
			}else if(education==""){
				out("请输入毕业学院");
			}else if(speciality==""){
				out("请输入专长");
			}else if(work==""){
				out("请输入著作/文章");
			}else if(describe==""){
				out("请输入签名");
			}else if(maxCount!=3){
				out("请上传身份证正面、反面、个人近照");
			}else if(phoneReg.test(phone) === false){
				out("电话号码输入不合法，请重新输入！");
			}else if(idCardReg.test(idCard) === false){
				out("身份证输入不合法，请重新输入！");
			}else{
				 var $loadingToast = $('#loadingToast');
				 if ($loadingToast.css('display') != 'none') return;
				 $loadingToast.fadeIn(100);
				function uploadImage(){
					var id = image[count].id;
					var name = image[count].alt;
					
					if(id.length>0){
						wx.uploadImage({
							localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: function (res) {		 
								var serverId = res.serverId; // 返回图片的服务器端ID
								//alert(serverId);
								var url = "${ctx}/wechat/mediaGet";
								$.ajax({ 
								   type: "post", 
								   url: url, 
								   async:false, 
								   data:"mediaId="+serverId+"&savePath=expert",
								   success: function(data){ 
									var imgData = data;
									  $("#"+name).val(imgData);
									  // alert(count);
									
									count++;
									if(count<maxCount){
										uploadImage()
									}else{
										$("#form").submit();
										$loadingToast.fadeOut(100);
									}
									 // alert(imgData);
								   } 
								});
							}
						}); 
					}else{
						$("#form").submit();
						$loadingToast.fadeOut(100);
					}
				}
				
				uploadImage();
				
			}
			
	
		});
		function out(content){
			$($tooltips).text(content)
					
			if ($tooltips.css('display') != 'none') return;
			// toptips的fixed, 如果有`animation`, `position: fixed`不生效
			$('.page.cell').removeClass('slideIn');
			$tooltips.css('display', 'block');
			setTimeout(function () {
				$tooltips.css('display', 'none');
			}, 2000);
		}
	})
	
  </script>
</head>
<body style="background:#ececec">
<!--错误提示-->
<div class="weui-toptips weui-toptips_warn js_tooltips"></div>
  <div class="pet_mian" >
  
      <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
		<div class="weui-mask_transparent"></div>
		<div class="weui-toast">
			<i class="weui-loading weui-icon_toast"></i>
			<p class="weui-toast__content">数据加载中</p>
		</div>
	</div>

    <div class="pet_content pet_content_list pet_hd">
      <div class="pet_article_like">
        <div class="pet_content_main pet_article_like_delete">
          <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
	      	<form action="${ctx }/expert/insert" method="post" id="form">
	      		 <div class="button-sp-area">
		             <div class="weui-cell weui-cell_select weui-cell_select-after">
		                <div class="weui-cell__hd">
		                    <label for="" class="weui-label">专家类型</label>
		                </div>
		                <input type="hidden" name="openId" value="<%=openId%>">
		                <div class="weui-cell__bd">
		                    <select class="weui-select" name="expertType">
		                       <c:forEach items="${issueTypeList }" var="issueType">
									 <!-- 判断问题类型是否停用 -->
									<c:if test="${issueType.status==1 }">
										<option value="${issueType.id }" <c:if test="${expertEntity.expertType eq issueType.id}"> selected</c:if>>${issueType.issueTypeName }</option>
									</c:if>
		                        </c:forEach>
		                    </select>
		                </div>
		            </div>
		            </div>
					
		           
		            <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入姓名" name="name" id="name" value="${expertEntity.name}"/>
		                </div>
		            </div>
					
					
					 <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
		                <div class="weui-cell__bd">
						
							<input type="radio" name="sex" checked="checked" value="男" <c:if test="${expertEntity.sex eq '男'}"> checked</c:if> /> 男
							<input style="margin-left:30px;" type="radio" name="sex" value="女" <c:if test="${expertEntity.sex eq '女'}"> checked</c:if>/> 女
					
		                </div>
		            </div>


					
		            <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">电话号码</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="number" pattern="[0-9]*" required placeholder="请输入电话" name="phone" id="phone" value="${expertEntity.phone}"/>
		                </div>
		            </div>
					 <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="number" pattern="[0-9]*" required placeholder="请输入身份证号" name="idCard" id="idCard" value="${expertEntity.idCard}"/>
		                </div>
		            </div>
					
					<div class="weui-cell">
						 <div class="weui-cell__hd"><label class="weui-label">身份证照片（正面）</label></div>
						<div class="weui-cell__bd">
						 <div class="weui-cell">
									<div class="weui-cell__bd">
										<div class="weui-uploader">
											<div class="weui-uploader__bd">
												<div class="weui-uploader__input-box" style="width: 200px;height: 100px;">
													<img class="image" src="${expertEntity.idCardImageFront}" width="100%" height="100%" >
													<input type="text" class="weui-uploader__input" onclick="chooseImage(this)" name="idCardImageFront" value="${expertEntity.idCardImageFront}"/>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					
					<div class="weui-cell">
						 <div class="weui-cell__hd"><label class="weui-label">身份证照片（反面）</label></div>
						<div class="weui-cell__bd">
		                   					
							 <div class="weui-cell">
										<div class="weui-cell__bd">
											<div class="weui-uploader">
												<div class="weui-uploader__bd">
													<div class="weui-uploader__input-box" style="width: 200px;height: 100px;">
													    <img class="image" src="${expertEntity.idCardImageReverse}" width="100%" height="100%" >
														<input type="text"  class="weui-uploader__input" onclick="chooseImage(this)" name="idCardImageReverse" value="${expertEntity.idCardImageReverse}"/>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>							
					
					 <div class="weui-cell">
						 <div class="weui-cell__hd"><label class="weui-label">个人近照 （一张）</label></div>
						<div class="weui-cell__bd">
		                   					
							 <div class="weui-cell">
										<div class="weui-cell__bd">
											<div class="weui-uploader">
												<div class="weui-uploader__bd">
													<div class="weui-uploader__input-box" style="width: 80px;height: 80px;">
														<img class="image" src="${expertEntity.selfie}" width="100%" height="100%" >
														<input type="text" class="weui-uploader__input" onclick="chooseImage(this)" name="selfie" value="${expertEntity.selfie}"/>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>						

					
						<div class="weui-cell weui-cell_select" style="padding: 10px 15px;">
							<div class="weui-cell__hd">
								<label for="" class="weui-label">居住地址</label>
							</div>
							 
							<div class="weui-cell__bd">
								<input type="text" class="weui-input" readonly id="J_Address" placeholder="请选择省/市/区" name="address" id="address" value="${expertEntity.address}">
							</div>
							
						</div>
					<div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">详细住址</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="街道/乡村及门牌号码" name="detailedAddress" id="detailedAddress" value="${expertEntity.detailedAddress}"/>
		                </div>
		            </div>
					
					<div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">工作单位</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入工作单位" name="workUnit" id="workUnit" value="${expertEntity.workUnit}"/>
		                </div>
		            </div>
		             <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">职务头衔</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入职务头衔" name="duty" id="duty" value="${expertEntity.duty}"/>
		                </div>
		            </div>
					<div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">毕业院校</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入毕业院校" name="education" id="education" value="${expertEntity.education}"/>
		                </div>
		            </div>
					 <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">学历/文凭</label></div>
		                <div class="weui-cell__bd">
		                    <input type="radio" name="resumeWriting" checked="checked" value="无" <c:if test="${expertEntity.resumeWriting eq '无'}"> checked</c:if> /> 无
							<input style="margin-left:5px;" type="radio" name="resumeWriting" value="专科" <c:if test="${expertEntity.resumeWriting eq '专科'}"> checked</c:if>/> 专科
							<input style="margin-left:5px;" type="radio" name="resumeWriting" value="本科" <c:if test="${expertEntity.resumeWriting eq '本科'}"> checked</c:if>/> 本科
							<input style="margin-left:5px;" type="radio" name="resumeWriting" value="博士" <c:if test="${expertEntity.resumeWriting eq '博士'}"> checked</c:if>/> 博士
		                </div>
		            </div>
					 <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">专长/专业</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入专长" name="speciality" id="speciality" value="${expertEntity.speciality}"/>
		                </div>
		            </div>
		            <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">著作/荣誉</label></div>
		                <div class="weui-cell__bd">
		                    <input class="weui-input" type="text" required placeholder="请输入著作/文章" name="work" id="work" value="${expertEntity.work}"/>
		                </div>
		            </div>
		            
		          <div class="weui-cell">
		                <div class="weui-cell__bd">
		                    <textarea class="weui-textarea" required placeholder="一句话介绍自己或表达理念，展示在专家介绍页面" rows="3" name="describe" onkeydown="checkSize(this)" id="describe" >${expertEntity.describe}</textarea>
		                </div>
		            </div>
		        <div class="button-sp-area">
					<c:if test="${empty expertEntity}">
						<input type="button" class="weui-btn weui-btn_primary" value="立即申请">
					</c:if>
					 <c:if test="${!empty expertEntity}">
						<input type="hidden" name="id" value="${expertEntity.id}">
						<input type="button" class="weui-btn weui-btn_primary" value="立即修改">
					 </c:if>
		        </div>
			</form>
	        </div>
              </div>

            </div>

          </div>

        </div>
      </div>
 <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
     <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
		<li>
           <a href="${ctx }/user/findUserIssue?issueTypeId=0" class="">
            <span class="am-icon-home"></span>
            <span class="am-navbar-label">首页</span>
          </a>
        </li>
        <li>
          <a href="${ctx }/issueType/findAll?mark=service&openId=<%=openId %>" class="">
            <span class="am-icon-comments"></span>
            <span class="am-navbar-label">提问</span>
          </a>
        </li>
		<li>
          <a href="${ctx }/postType/findAllPostType" class="">
            <span class="am-icon-book"></span>
            <span class="am-navbar-label">学习</span>
          </a>
        </li>
        <li style="position:relative">
          <a href="${ctx }/user/findByOpenId?openId=<%=openId %>" class="">
            <span class="am-icon-user"></span>
            <span class="am-navbar-label">我的</span>
          </a>
        </li>
      </ul>
</div>
   <script src="../js/china_area.js"></script>
   <script src="../js/ydui.citys.js"></script>
    <script src="../js/text-calculation.js"></script>
<script src="../js/ydui.js"></script>
    <script>
	
			/**
		 * 默认调用
		 */
		!function () {
			var $target = $('#J_Address');

			$target.citySelect();

			$target.on('click', function (event) {
				event.stopPropagation();
				$target.citySelect('open');
			});

			$target.on('done.ydui.cityselect', function (ret) {
				$(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
			});
		}();
		
		$(function(){
			$(".m-cityselect").css("margin-bottom","50px");
		})
	
</script>
   
</body>
  </html>